/*
 * @Author: 周润玉|zhourunyu1@outlook.com(zhourunyu)
 * @Date: 2022-03-11 14:51:37
 * @LastEditors: 周润玉|zhourunyu1@outlook.com(zhourunyu)
 * @LastEditTime: 2022-07-14 14:17:17
 * @Description: 
 * @Administrator: 
 * @Copyright: 文件版本号
 */
import BulkInventoryLogApi from '../../../common/api/scm/bulkinventorylog.api.js';

let _buikInventoryArry;

(function (window, document, $) {
    $(function () {
        // JS严格模式
        'use strict';
        $('body').attr('data-weui-theme', 'light'); // 强制光明模式
        
        initJointDate();
    });

    //TODO :样式加载查询事件
    //Date :2022-03-16 11:49:52
    //create周润玉
    const initJointDate = () => {
        BulkInventoryLogApi.getBulkinventorysnapshot(getUrlKey("id")).then(result => {
            _buikInventoryArry ='';
            _buikInventoryArry = result;
            let endTime = '';
            if (!Utils.IsNotNull(result)) {
                $('#newToday').text(endTime);
            } else {
                $('#newToday').text(moment(result[0].bizDate[6]).format('YYYY-MM-DD'));
            }
            
            _dataFilterPack(result);
        });
    }

    const getUrlKey = (name) => { /** 获取地址栏的 参数  传入 字段返回值 */
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]); return null;
    }

    //TODO :点击触发查询事件
    //Date :2022-03-16 10:36:15
    //create周润玉
    const initCurinventory = () => {
        //点击存量加载柱状图数据并展示
        $(".reportEcharts").on('click', function () {
            let type = $(this).next()[0].style.display;
            if (type == "block") {
                $(this).next().css("display", "none");
                $(this).find('.weui-cell__bd').removeClass('choose');
            } else {
                let bizDate = $(this).attr("data-bizDate");
                let curQty = $(this).attr("data-curQty");
                let estimatedConsumptionQty = $(this).attr("data-estimated");
                let undeliveredQty = $(this).attr("data-undeliveredQty");

                $(this).next().css("display", "block");
                $(this).find('.weui-cell__bd').addClass('choose');
                let queryId = $(this).next().find('.swiper-slide').children()[0].id;
                initEcharts(queryId, bizDate, curQty, estimatedConsumptionQty, undeliveredQty);
            }
            isInViewPort($(this).parent().get(0));
        });

        //搜索框内容查询事件
        $("#search_bar form").submit(function () {
            _mainSearch();
            return false;
        }).on("input propertychange", Utils.throttle(_mainSearch, 500));

        //搜索框内容删除
        $(document).on('click', '#search_clear', function () {
            $("#curinventory").empty();
            _dataFilterPack(_buikInventoryArry);
        });

        //搜索框内容取消
        $(document).on('click', '#search_cancel', function () {
            $("#curinventory").empty();
            _dataFilterPack(_buikInventoryArry);
        });
    }

    const _mainSearch = () => {
        let val = $("#search-index").val();
        let resData = _buikInventoryArry.filter(item => item.materialName.indexOf(val) >= 0);
        let resCode = _buikInventoryArry.filter(item => item.materialNumCode.indexOf(val) >= 0);
        $("#curinventory").empty();
        if (Utils.IsNotNull(resData)) {
            _dataFilterPack(resData);
        } else {
            _dataFilterPack(resCode);
        }
    }

    //根据返回数据进行组装
    const _dataFilterPack = (result) => {
        for (var i = 0; i < result.length; i++) {
            let bizArry = [];
            $.each(result[i].bizDate, function (i, v) {
                bizArry.push(moment(v).format('MM-DD'));
            });
            let totalCount=result[i].curQty.slice(-1);//取数组的最后一个元素
            let html =
                '<div class="report-contents-item-box" style="border-radius: 0.3rem;box-shadow: 1px 1px 1px 0px #d0cccc">' +
                '<div class="weui-cell weui-cell_select reportEcharts" data-bizDate=' + bizArry + ' data-curQty=' + result[i].curQty + ' data-estimated=' + result[i].estimatedConsumptionQty + ' data-undeliveredQty=' + result[i].undeliveredQty + '>' +
                '<div style="padding: 15px;padding-left: 12px;">' +
                '<span style="font-size: 16px">' + result[i].materialName + '</span>' +
                '<span style="font-size: 10px;color: #aba7a7;margin-left: 5px">' + result[i].materialNumCode + '</span><br>' +
                '<span style="font-size: 17px;color: #ec9422">' + totalCount + '<span style="font-size: 10px;"> ' + result[i].materialBaseUnit + '</span></span>' +
                '</div>' +
                '<div class="weui-cell__bd" style="text-align: right;margin-right: 40px;"></div></div>' +
                '<div class="weui-cell weui-cell_select echartsList" style="display: none;">' +
                '<div class="weui-cell__bd">' +
                '<div class="swiper-container" style="margin:0 0.3125rem 10px 0.3125rem; background: #FFF;">' +
                '<div class="swiper-wrapper">' +
                '<div class="swiper-slide">' +
                '<div id="main' + i + '" style="height: 350px; width:100%;"></div>' +
                '</div></div></div></div></div>' +
                '</div>';
            $('#curinventory').append(html);
        }
        initCurinventory();
    }

    //TODO : 判断是否在可视范围内,并进行滚动
    //Date :2022-03-15 18:01:41
    //create丁平
    function isInViewPort(element) {
        const viewWidth = window.innerWidth || document.documentElement.clientWidth;
        const viewHeight = window.innerHeight || document.documentElement.clientHeight;
        const { top, right, bottom, left } = element.getBoundingClientRect();
        const _flag = top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
        if (!_flag) {
            const _dom = document.getElementById('curinventory');
            _dom.scrollTo({
                left: 0, top: _dom.scrollTop + (bottom - viewHeight), behavior: "smooth"
            })
        }
        return _flag;
    }

    //TODO : 绘制柱状图
    //Date :2022-03-16 09:45:35
    //create周润玉
    const initEcharts = (val, bizDate, curQty, estimatedConsumptionQty, undeliveredQty) => {
        var chartDom = document.getElementById(val);
        var myChart = echarts.init(chartDom);
        var option;

        const data1 = curQty.split(',');
        const data2 = undeliveredQty.split(',');
        const data3 = estimatedConsumptionQty.split(',');        

        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['当期预消耗', '即时库存', '未到货']
            },
            xAxis: {
                axisLabel: {
                    interval: 0,//X轴信息全部展示
                    rotate: 50,//60 标签倾斜的角度
                },
                data: bizDate.split(',')
            },
            color: ['#c3dfb0', '#7c9cd6', '#e09a56'],
            yAxis: {
                axisLabel: {}
            },
            grid: {
                left: '13%'
            },
            series: [
                {
                    name: '即时库存',
                    type: 'bar',
                    z: '-1',
                    barGap: '-84%',
                    stack: 'Ad',
                    barWidth: '30',
                    data: data1
                },
                {
                    name: '未到货',
                    z: '-1',
                    barGap: '-84%',
                    type: 'bar',
                    barWidth: '30',
                    stack: 'Ad',
                    data: data2
                },
                {
                    name: '当期预消耗',
                    type: 'bar',
                    barWidth: '20',
                    data: data3
                }
            ]
        };
        option && myChart.setOption(option);
    }

})(window, document, jQuery);
